<!--
 * @Author: wangming
 * @Date: 2022-03-16 16:33:26
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-01 10:50:24
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hmMqtt.vue
 * @Description: 
-->
<template>
  <div>
    <el-form-item label="互联配置" class="tr">
      <el-switch v-model="value.__config.mqttFlag"></el-switch>
    </el-form-item>
    <el-form-item label="匹配字段" v-if="value.__config.mqttFlag">
      <el-select
        multiple
        clearable
        placeholder="请选择"
        size="small"
        style="width: 100%"
        :value="mqttKeys"
        @input="changeMqtt"
      >
        <el-option
          v-for="(item, index) in value.__config.getEntitymodelList"
          :key="index"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="MQTT" v-if="value.__config.mqttFlag">
      <el-select
        clearable
        placeholder="请选择"
        size="small"
        style="width: 100%"
        v-model="value.__config.mqttKey"
      >
        <el-option
          v-for="(item, index) in mqttOptions"
          :key="index"
          :label="item.name"
          :value="item.key"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="MQTT主题" class="tr" v-if="value.__config.mqttFlag">
      <el-input
        v-model="value.__config.mqttTopic"
        size="small"
        placeholder="请输入"
      ></el-input>
    </el-form-item>
  </div>
</template>

<script>
import { getHmmqttSelectlist } from "@/apis/paas/HmMqttLinkController.js";
import basicmixins from "./basicmixins";
export default {
  data() {
    return {
      mqttOptions: [],
    };
  },
  watch: {
    "value.__config.mqttFlag": {
      handler: function (flag) {
        if (flag) {
          this.getmqttOptions();
        }
      },
      immediate: true,
    },
  },
  computed: {
    mqttKeys() {
      return this.value.__config.mqttKeys || [];
    },
  },
  mixins: [basicmixins],
  methods: {
    async getmqttOptions() {
      this.mqttOptions = await getHmmqttSelectlist();
    },
    changeMqtt(value) {
      this.$set(this.value.__config, "mqttKeys", value);
    },
  },
};
</script>

<style scoped lang="scss">
</style>
